<template>
  <span class="teitou">促销中心</span>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
  <el-tab-pane label="促销报名" name="first">促销报名</el-tab-pane>
  <el-tab-pane label="已参加促销" name="second" >
  <!-- 状态 -->

      <div class="box_27 flex-row">
          <div class="flex-sonle">
              <span class="text_14">状态:</span>
            <div class="text-wrapper_1 ">
              <span class="text_15">已生效</span>
            </div>
            <div class="text-wrapper_2 ">
              <span class="text_16">已暂停</span>
            </div>
            <div class="text-wrapper_3 ">
              <span class="text_17">已取消</span>
            </div>
            <div class="text-wrapper_4 ">
              <span class="text_18">已过期</span>
            </div>
          </div>
            

             <!--下拉框-->
             <div>
              <el-form :model="form" >
  <el-form-item label="促销类型：">
    <el-select v-model="form.region" placeholder="全部" label-width="200px">
      <el-option label="提前预定" value="predetermine" />
      <el-option label="天天特价" value="Special-offer" />
      <el-option label="早订优惠" value="long-since" />
      <el-option label="连住优惠" value="continuous" />
      <el-option label="今夜甩卖" value="reduction" />
   </el-select>
  </el-form-item>
         </el-form>
             </div>
        
      </div> 
 
  <!-- 数据表 -->
  <el-table :data="filterTableData" style="width: 100%" >
  <el-table-column label="促销名称" prop="name" />
  <el-table-column label="参与房型" prop="address" />
  <el-table-column label="促销时间" prop="date" />
  <el-table-column label="不适用时间" prop="outmoded" />
  <el-table-column label="促销房量" prop="promotion" />
  <el-table-column label="促销优惠" prop="sepcial" />
  <el-table-column label="操作">
    <template #header width="400px">
      <el-input v-model="search" size="small" placeholder="Type to search" />
    </template>
    <template #default="scope">
      <span>修改</span>&emsp;
      <span>暂停</span>&emsp;
      <span>取消</span>
    </template>
  </el-table-column>
</el-table>
  </el-tab-pane>
  <el-tab-pane label="促销数据" name="third">促销数据</el-tab-pane>
  <el-tab-pane label="叠加规则" name="fourth">叠加规则</el-tab-pane>
</el-tabs>



</template>

<script lang="ts" setup >
import {computed,ref,reactive} from 'vue'
// 促销报名页代码
// 1 状态提示
  //有四个框变成那个变成蓝色代表正在什么状态 
//设置时间下拉框的type||yebe


//  console.log(data),
// 选项卡的代码
import type { TabsPaneContext } from 'element-plus'
//表单
interface User {
date: string
name: string
address: string
outmoded:string
promotion:string
sepcial:string
}

const search = ref('')
const filterTableData = computed(() =>
tableData.filter(
  (data) =>
    !search.value ||
    data.name.toLowerCase().includes(search.value.toLowerCase()),
)
)
//表单增删改查事件函数
const handleEdit = (index: number, row: User) => {
console.log(index, row)
}
const handleDelete = (index: number, row: User) => {
console.log(index, row)
}

const tableData: User[] = [
{
  date: '2016-05-03',
  name: '天天特价',
  address: 'No. 189, Grove St, Los Angeles',
  outmoded:'无',
  promotion:"不限",
  sepcial:"提前3天预订 7 折",
},
{
  date: '2016-05-02',
  name: 'John',
  address: 'No. 189, Grove St, Los Angeles',
  outmoded:'无',
  promotion:"不限",
  sepcial:"提前3天预订 7 折",
},
{
  date: '2016-05-04',
  name: 'Morgan',
  address: 'No. 189, Grove St, Los Angeles',
  outmoded:'无',
  promotion:"不限",
  sepcial:"提前3天预订 7 折",
},
{
  date: '2016-05-01',
  name: 'Jessy',
  address: 'No. 189, Grove St, Los Angeles',
  outmoded:'无',
  promotion:"不限",
  sepcial:"提前3天预订 7 折",
},
{
  date: '2016-05-01',
  name: 'Jessy',
  address: 'No. 189, Grove St, Los Angeles',
  outmoded:'无',
  promotion:"不限",
  sepcial:"提前3天预订 7 折",
},
{
  date: '2016-05-01',
  name: 'Jessy',
  address: 'No. 189, Grove St, Los Angeles',
  outmoded:'无',
  promotion:"不限",
  sepcial:"提前3天预订 7 折",
},
{
  date: '2016-05-01',
  name: 'Jessy',
  address: 'No. 189, Grove St, Los Angeles',
  outmoded:'无',
  promotion:"不限",
  sepcial:"提前3天预订 7 折",
},
{
  date: '2016-05-01',
  name: 'Jessy',
  address: 'No. 189, Grove St, Los Angeles',
  outmoded:'无',
  promotion:"不限",
  sepcial:"提前3天预订 7 折",
},
{
  date: '2016-05-01',
  name: 'Jessy',
  address: 'No. 189, Grove St, Los Angeles',
  outmoded:'无',
  promotion:"不限",
  sepcial:"提前3天预订 7 折",
},
{
  date: '2016-05-01',
  name: 'Jessy',
  address: 'No. 189, Grove St, Los Angeles',
  outmoded:'无',
  promotion:"不限",
  sepcial:"提前3天预订 7 折",
},
{
  date: '2016-05-01',
  name: 'Jessy',
  address: 'No. 189, Grove St, Los Angeles',
  outmoded:'无',
  promotion:"不限",
  sepcial:"提前3天预订 7 折",
},
{
  date: '2016-05-01',
  name: 'Jessy',
  address: 'No. 189, Grove St, Los Angeles',
  outmoded:'无',
  promotion:"不限",
  sepcial:"提前3天预订 7 折",
},
{
  date: '2016-05-01',
  name: 'Jessy',
  address: 'No. 189, Grove St, Los Angeles',
  outmoded:'无',
  promotion:"不限",
  sepcial:"提前3天预订 7 折",
},
{
  date: '2016-05-01',
  name: 'Jessy',
  address: 'No. 189, Grove St, Los Angeles',
  outmoded:'无',
  promotion:"不限",
  sepcial:"提前3天预订 7 折",
},
{
  date: '2016-05-01',
  name: 'Jessy',
  address: 'No. 189, Grove St, Los Angeles',
  outmoded:'无',
  promotion:"不限",
  sepcial:"提前3天预订 7 折",
},
]
//选项卡数据
// do not use same name with ref
const form = reactive({
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: '',
})

const onSubmit = () => {
console.log('submit!')
}
// 选项卡的代码

const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
console.log(tab, event)
}
</script>


<style>
/* 促销页状态 */
/* 执行的选择这个 */
/* color: rgba(4, 102, 200, 1); */

/* 状态 */
.flex-row{
  display: flex;
  /* justify-content:space-between; */
}
.flex-sonle{
  display: flex;
  margin-right: 500px;
}
.box_27 {
width: 1566px;
height: 31px;
margin: 7px 0 0 1px;
}
.text_14 {
width: 25px;
height: 13px;
overflow-wrap: break-word;
color: rgba(85, 85, 85, 1);
font-size: 12px;
font-family: MicrosoftYaHei;
text-align: left;
white-space: nowrap;
line-height: 24px;
margin-top: 9px;
}
.text-wrapper_1 {
background-color: rgba(204, 204, 204, 1);
height: 30px;
width: 52px;
margin: 1px 0 0 31px;
}

.text_15 {
width: 36px;
height: 12px;
overflow-wrap: break-word;

font-size: 12px;
font-family: MicrosoftYaHei;
text-align: left;
white-space: nowrap;
line-height: 24px;
margin: 9px 0 0 7px;
}

.text-wrapper_2 {
background-color: rgba(204, 204, 204, 1);
height: 30px;
width: 52px;
margin: 1px 0 0 32px;
}

.text_16 {
width: 36px;
height: 13px;
overflow-wrap: break-word;
color: rgba(85, 85, 85, 1);
font-size: 12px;
font-family: MicrosoftYaHei;
text-align: left;
white-space: nowrap;
line-height: 24px;
margin: 8px 0 0 8px;
}

.text-wrapper_3 {
background-color: rgba(204, 204, 204, 1);
height: 30px;
width: 52px;
margin: 1px 0 0 32px;
}

.text_17 {
width: 35px;
height: 13px;
overflow-wrap: break-word;
color: rgba(85, 85, 85, 1);
font-size: 12px;
font-family: MicrosoftYaHei;
text-align: left;
white-space: nowrap;
line-height: 24px;
margin: 8px 0 0 8px;
}

.text-wrapper_4 {
background-color: rgba(204, 204, 204, 1);
height: 30px;
width: 52px;
margin: 1px 0 0 32px;
}

.text_18 {
width: 35px;
height: 13px;
overflow-wrap: break-word;
color: rgba(85, 85, 85, 1);
font-size: 12px;
font-family: MicrosoftYaHei;
text-align: left;
white-space: nowrap;
line-height: 24px;
margin: 8px 0 0 8px;
}




/* 标题 */
.teitou{
  font-size: 66px;
}
/* 选项卡css */
.demo-tabs > .el-tabs__content {
/* padding: 32px; */
color: #6b778c;
font-size: 20px;
/* font-weight: 600; */
}
</style>